<template>
<div>
  
  <router-link to="/searchShop"><van-search v-model="value" placeholder="请输入搜索关键词" /></router-link>
  <div class="classify">

    <van-sidebar v-model="activeKey" @change="onChange" >
      <van-sidebar-item  v-for="item in navdata" :key="item.catagoryId"  :title="item.name"/>
      </van-sidebar>
      <ClassItem  :nowindex="nowindex" :sortId="sortId"></ClassItem>
  </div>
  <Footer :Factive="active"></Footer>
  </div>
</template>

<script>
import Vue from "vue";
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
import { get  , post} from '../util/ajax'
import ClassItem from "./classifyjuti"
import axios from 'axios'
import Footer from '../components/footer'
import { Sidebar, SidebarItem , Notify , Search , Divider } from 'vant';
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);
Vue.use(Divider);
export default {
  data() {
    return {
      value:'',
      activeKey: 0,
      name:'',
      navdata: '',
      nowindex:'',
      classify:'',
      active:1,
      sortId:''
    };
  },
  methods: {
    onChange(index) {
         this.nowindex = index
         console.log(this.nowindex) 
         this.sortId = this.navdata[index].catagoryId
        //  console.log(this.navdata)
        //  console.log(this.sortId)
    }

  },
  created(){
    
    axios({
      url : '/classify/navList',
      method:'get'
    })
    .then((result) => {
       this.navdata = result.data.data.catagoryList
       this.sortId = this.navdata[0].catagoryId
    })
    .catch((err) => {
      console
    })

  },
  components : {
    ClassItem,
    Footer
  }
};
</script>

<style lang="stylus" scoped>
.van-search__content
  border-radius .3rem
div.classify 
  display flex
  width 100%
  height 14rem
  overflow hidden

  .van-sidebar
    text-align center
    overflow scroll
    .van-sidebar-item--select 
       color #7f4395
       &::before
          background-color #7f4395 
          font-size .3rem
       span 
          font-size .3rem
       
    
</style>
<style scoped>

</style>